<template>
  <div class="waveWrapper waveAnimation">
    <div class="loginForm">
      <div class="logo">登录</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="ruleForm"
      >
        <el-form-item label="用户名" prop="user">
          <el-input
            v-model="ruleForm.userName"
            type="text"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <!-- <el-form-item>
          <el-checkbox v-model="ruleForm.checked" label="记住密码" size="large" />
        </el-form-item> -->
        <el-form-item prop="slider">
          <Slider @validate="validate" />
        </el-form-item>
        <el-form-item>
          <el-button
            size="large"
            style="width: 100%"
            type="primary"
            @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="waveWrapperInner bgTop">
      <div
        class="wave waveTop"
        style="
          background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png');
        "
      ></div>
    </div>
    <div class="waveWrapperInner bgMiddle">
      <div
        class="wave waveMiddle"
        style="
          background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png');
        "
      ></div>
    </div>
    <div class="waveWrapperInner bgBottom">
      <div
        class="wave waveBottom"
        style="
          background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png');
        "
      ></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref,onBeforeUnmount } from "vue";
import { useUserStore } from "@/store/user";
import {
  userValidate,
  passValidate,
  sliderValidator,
} from "@/utils/validate.js";
import { useRouter } from "vue-router";
import Slider from "./slider.vue";
const router = useRouter();
const store = useUserStore();
const ruleFormRef = ref(null);
let ruleForm = reactive({
  userName: "admin",
  password: "123123",
  slider: "",
});

const rules = reactive({
  user: [
    {
      validator: userValidate,
      trigger: "blur",
    },
  ],
  pass: [
    {
      validator: passValidate,
      trigger: "blur",
    },
  ],
  slider: [{ required: true, trigger: "blur", validator: sliderValidator }],
});

const timer = ref(null)

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      store.Login(ruleForm).then((res) => {
        if (res) {
          ElMessage.success(res.msg);
         timer.value = setTimeout(() => {
               router.push("/");
          },1000)
         
        } else {
          ElMessage.error(res);
        }
      });
      
    } else {
      
      console.log("error submit!", fields);
    }
  });
};
const validate = (val) => {
  ruleForm.slider = val;
};

// 销毁定时器
onBeforeUnmount(()=>{
  clearTimeout(timer.value)
  })
</script>

<style lang="scss" scoped>
.loginForm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  .logo {
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ruleForm {
    &:deep(.el-form-item) {
      min-width: 300px;
      display: flex;
      flex-direction: column;
      .el-form-item__label {
        justify-content: flex-start;
        font-weight: 700;
      }
      .el-form-item__content {
        margin-left: 0 !important;
      }
      .el-input {
        height: 45px;
      }
    }
  }
}
@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
.waveWrapper {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
  background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}
.bgTop {
  z-index: 15;
  opacity: 0.5;
}
.bgMiddle {
  z-index: 10;
  opacity: 0.75;
}
.bgBottom {
  z-index: 5;
}
.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}
.waveTop {
  background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
  -webkit-animation: move-wave 3s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.waveMiddle {
  background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
  animation: move_wave 10s linear infinite;
}
.waveBottom {
  background-size: 50% 100px;
}
.waveAnimation .waveBottom {
  animation: move_wave 15s linear infinite;
}
</style>